<template>
	<view>
		<view class="filter">
			<slot></slot>
			<view class="filterBts">
				<view class="btn substring" @click="openFilterPopup('showPickerDistrict')"> {{areaText}}</view>
				<view class="btn substring" v-if="isTrade" @click="openFilterPopup('showPickerTrade')">{{industryText}}
				</view>
				<view class="btn substring" v-if="isJob" @click="openFilterPopup('showPickerJobCategory')">{{jobText}}
				</view>
				<view class="btn substring" @click="openFilterPopup('showPickerOther')">筛选 <text class="otherNum"
						v-if="otherNum>0">{{otherNum}}</text></view>
			</view>
		</view>
		<!-- 地区 -->
		<u-popup v-model="showPickerDistrict" mode="bottom" height="900rpx" width="100%" ref="dropDistrict">
			<scroll-view scroll-y="true" style="height: 900rpx;">
				<DistrictFilter class="districtFilter"
					:districts="[params.district1, params.district2, params.district3]" :type="true"
					@doSearch="doSearchByDistrict"></DistrictFilter>
			</scroll-view>
		</u-popup>
		<!-- 地区 -->

		<!-- 职位 -->
		<u-popup v-model="showPickerJobCategory" mode="bottom" height="900rpx" width="100%">
			<scroll-view scroll-y="true" style="height: 900rpx;">
				<JobCategoryFilter class="jobCategoryFilter"
					:categories="[params.category1, params.category2, params.category3]" :type="true"
					@doSearch="doSearchByCategory"></JobCategoryFilter>
			</scroll-view>
		</u-popup>
		<!-- 职位 -->

		<!-- 行业 -->
		<u-picker mode="selector" v-model="showPickerTrade" :range="optionTrade" :default-selector="[tradeIndex]"
			range-key="label" @confirm="handleTradeConfirm"></u-picker>
		<!-- 行业 -->


		<u-popup v-model="showPickerOther" border-radius="30" mode="bottom" height="1200rpx" width="100%"
			z-index="100000">
			<view>
				<view class="more_title">
					<text class="title">筛选</text>
					<u-icon name="close" @click="showPickerOther = false"></u-icon>
				</view>
				<scroll-view scroll-y="true" style="height:1200rpx;">
					<view class="more_box">
						<!-- 职位其他搜索 -->
						<view class="item_wrapper" v-if="otherFilterType == 'jobListType'">
							<view class="item_title">学历要求</view>
							<view class="item_group clearfix">
								<view :class="item.select || item.id == education ? 'item selected' : 'item'"
									v-for="(item, index) in optionEducation" :key="index"
									@click="optionEducation = restructureData(optionEducation,item.id,'education')">
									{{ item.text }}
								</view>
								<view class="clear"></view>
							</view>
							<view class="item_title">薪资待遇</view>
							<view class="item_group clearfix">
								<view :class="item.select||item.id==wage ? 'item selected' : 'item'"
									v-for="(item, index) in optionFilterWage" :key="index"
									@click="optionFilterWage = restructureData(optionFilterWage,item.id,'wage')">
									{{ item.text }}
								</view>
								<view class="clear"></view>
							</view>
							<view class="item_title">工作经验</view>
							<view class="item_group clearfix">
								<view :class="item.select || item.id==experience ? 'item selected' : 'item'"
									v-for="(item, index) in optionExperience" :key="index"
									@click="optionExperience = restructureData( optionExperience, item.id, 'experience' ) ">
									{{ item.text }}
								</view>
								<view class="clear"></view>
							</view>
							<view class="item_title">福利待遇</view>
							<view class="item_group clearfix">
								<view :class="item.select ? 'item selected' : 'item'"
									v-for="(item, index) in optionJobTag" :key="index" @click="handleCheckJobTag(item)">
									{{ item.text }}
								</view>
								<view class="clear"></view>
							</view>
							<view class="item_title">更新时间</view>
							<view class="item_group clearfix">
								<view :class="item.select||item.id==settr ? 'item selected' : 'item'"
									v-for="(item, index) in optionSettr" :key="index"
									@click=" optionSettr = restructureData(optionSettr, item.id, 'settr')">
									{{ item.text }}
								</view>
								<view class="clear"></view>
							</view>
						</view>
						<!-- 职位其他搜索 -->
						<!-- 企业其他搜索 -->
						<view class="item_wrapper" v-if="otherFilterType == 'companyListType'">
							<view class="item_title">企业规模</view>
							<view class="item_group clearfix">
								<view :class="item.select ||item.id==scale ? 'item selected' : 'item'"
									v-for="(item, index) in optionScale" :key="index"
									@click="optionScale = restructureData(optionScale,item.id,'scale')">
									{{ item.text }}
								</view>
								<view class="clear"></view>
							</view>
							<view class="item_title">企业性质</view>
							<view class="item_group clearfix">
								<view :class="item.select ||item.id==nature ? 'item selected' : 'item'"
									v-for="(item, index) in optionNature" :key="index"
									@click="optionNature = restructureData(optionNature,item.id,'nature')">
									{{ item.text }}
								</view>
								<view class="clear"></view>
							</view>
						</view>
						<!-- 企业其他搜索 -->


						<!-- 简历其他搜索 -->
						<view class="item_wrapper" v-if="otherFilterType == 'resumeListType'">
							<view class="item_title">性别</view>
							<view class="item_group clearfix">
								<view :class="item.select || item.id == sex ? 'item selected' : 'item'"
									v-for="(item, index) in optionGender" :key="index"
									@click="optionGender = restructureData( optionGender, item.id, 'sex' ) ">
									{{ item.text }}
								</view>
								<view class="clear"></view>
							</view>
							<view class="item_title">年龄</view>
							<view class="item_group clearfix">
								<view :class="item.select||item.id==age ? 'item selected' : 'item'"
									v-for="(item, index) in optionAge" :key="index"
									@click="optionAge = restructureData(optionAge,item.id,'age')">
									{{ item.text }}
								</view>
								<view class="clear"></view>
							</view>
							<view class="item_title">经验</view>
							<view class="item_group clearfix">
								<view :class="item.select||item.id==experience ? 'item selected' : 'item'"
									v-for="(item,index) in optionExperience" :key="index"
									@click="optionExperience = restructureData(optionExperience,item.id,'experience')">
									{{item.text}}
								</view>
							</view>
							<view class="item_title">学历</view>
							<view class="item_group clearfix">
								<view :class="item.select || item.id == education ? 'item selected' : 'item'"
									v-for="(item,index) in optionEducation" :key="index"
									@click="optionEducation = restructureData(optionEducation,item.id,'education')">
									{{item.text}}
								</view>
							</view>
							<view class="item_title">期望薪资</view>
							<view class="item_group">
								<view :class="item.select||item.id == wage ? 'item selected' : 'item'"
									v-for="(item, index) in optionFilterWage" :key="index"
									@click="optionFilterWage = restructureData(optionFilterWage,item.id,'wage')">
									{{ item.text }}
								</view>
								<view class="clear"></view>
							</view>
							<view class="item_title">简历标签</view>
							<view class="item_group clearfix">
								<view :class="item.select ? 'item selected' : 'item'"
									v-for="(item, index) in optionResumeTag" :key="index"
									@click="handleCheckResumeTag(item)">
									{{ item.text }}
								</view>
								<view class="clear"></view>
							</view>
							<view class="item_title">更新时间</view>
							<view class="item_group clearfix">
								<view :class="item.select||item.id==settr ? 'item selected' : 'item'"
									v-for="(item, index) in optionSettr" :key="index"
									@click="optionSettr = restructureData(optionSettr, item.id, 'settr')">
									{{ item.text }}
								</view>
								<view class="clear"></view>
							</view>
						</view>

						<!-- 简历其他搜索 -->
					</view>
				</scroll-view>
				<view class="wrapper_bottom">
					<view class="btn_c reset" @click="handleClearMore">重置</view>
					<view class="btn_c affirm" @click="handleSelectMore">确定</view>
				</view>
			</view>

		</u-popup>

	</view>
</template>

<script>
	/**
	 * params  地区职位初始化数据
	 * otherFilterType  其他类型筛选状态
	 * @doSearchByDistrict 地区搜索返回事件
	 * @doSearchByTrade  行业搜索
	 * 
	 * */
	import DistrictFilter from '@/components/DistrictFilter'
	import JobCategoryFilter from '@/components/JobCategoryFilter'
	export default {
		name: "ListFilters",
		props: {
			params: {
				type: Object,
				default: {}
			},
			otherFilterType: {
				type: String,
				default: 'jobListType'
			}
		},
		data() {
			return {
				areaText: '地区',
				industryText: '行业',
				jobText: '职位',
				otherNum: 0,
				showPickerJobCategory: false, // 职位筛选
				showPickerDistrict: false, // 地区筛选
				showPickerOther: false, //其他筛选
				showPickerTrade: false, // 行业弹窗
				optionScale: [], // 企业规模
				optionNature: [], // 企业性质
				optionTrade: [], //行业
				tradeIndex: 0, //行业当前选中下标
				selectObj: {}, // 其他筛选选中id
				optionSettr: [{ // 更新时间
						text: '3天内',
						id: 3
					},
					{
						text: '7天内',
						id: 7
					},
					{
						text: '15天内',
						id: 15
					},
					{
						text: '30天内',
						id: 30
					}
				],
				optionFilterWage: [{ // 薪资待遇
						id: '',
						text: '不限',
						select: true,
						min: '',
						max: ''
					},
					{
						text: '1000元以下',
						id: 1,
						select: false,
						min: 0,
						max: 1000
					},
					{
						text: '1000-2000元',
						id: 2,
						select: false,
						min: 1000,
						max: 2000
					},
					{
						text: '2000-3000元',
						id: 3,
						select: false,
						min: 2000,
						max: 3000
					},
					{
						text: '3000-5000元',
						id: 4,
						select: false,
						min: 3000,
						max: 5000
					},
					{
						text: '5000-8000元',
						id: 5,
						select: false,
						min: 5000,
						max: 8000
					},
					{
						text: '8000-12000元',
						id: 6,
						select: false,
						min: 8000,
						max: 12000
					},
					{
						text: '12000-15000元',
						id: 7,
						select: false,
						min: 12000,
						max: 15000
					},
					{
						text: '15000元以上',
						id: 8,
						select: false,
						min: 15000,
						max: ''
					}
				],
				optionJobTag: [], // 福利待遇
				optionExperience: [], // 经验
				optionEducation: [], //学历
				selectJobTag: [], // 福利待遇 选中项
				optionResumeTag: [], // 简历标签
				optionGender: [{ // 性别
						text: '男',
						id: 1
					},
					{
						text: '女',
						id: 2
					}
				],
				optionAge: [{
						text: '全部',
						id: '',
						min: '',
						max: '',
						select: true
					},
					{
						text: '16-20岁',
						id: 1,
						min: 16,
						max: 20,
						select: false
					},
					{
						text: '20-30岁',
						id: 2,
						min: 20,
						max: 30,
						select: false
					},
					{
						text: '30-40岁',
						id: 3,
						min: 30,
						max: 40,
						select: false
					},
					{
						text: '40-50岁',
						id: 4,
						min: 40,
						max: 50,
						select: false
					},
					{
						text: '50岁以上',
						id: 5,
						min: 50,
						max: '',
						select: false
					}
				],
				selectResumeTag: [], // 简历标签 选中项
				education: '-1',
				sex: '-1',
				settr: '-1',
				experience: '-1',
				wage: '-1',
				age: '-1',
				tag: '-1',
				scale: '-1',
				nature: '-1',
				trade: '-1'
			};
		},
		computed: {
			isTrade() {
				var pages = getCurrentPages();
				var currentRoute = pages[pages.length - 1].route;
				if (currentRoute == 'views/SearchShow') {
					return false
				} else if (this.otherFilterType == 'companyListType') {
					return true
				} else {
					return false
				}
			},
			isJob() {
				var pages = getCurrentPages();
				var currentRoute = pages[pages.length - 1].route;
				if (currentRoute == 'views/SearchShow') {
					return false
				} else if (this.otherFilterType == 'jobListType') {
					return true
				} else {
					return false
				}
			}
		},
		components: {
			DistrictFilter,
			JobCategoryFilter
		},
		created() {
			this.initData()
		},
		methods: {
			initShareData(params) {
				console.log(params, 'params========分享页面参数')
				this.areaText = params.districtName && params.districtName != '' ? params.districtName : '地区'
				this.jobText = params.categoryName && params.categoryName != '' ? params.categoryName : '职位'
				this.otherNum = params.otherNum && params.otherNum != '' ? params.otherNum : 0
				this.industryText = params.tradeName && params.tradeName != '' ? params.tradeName : '行业'
				this.education = params.education ? params.education : '-1'
				this.sex = params.sex ? params.sex : '-1'
				this.experience = params.experience ? params.experience : '-1'
				this.settr = params.settr ? params.settr : '-1'
				this.wage = params.wage ? params.wage : '-1'
				this.age = params.age ? params.age : '-1'
				this.tag = params.tag ? params.tag : '-1'
				this.scale = params.scale ? params.scale : '-1'
				this.nature = params.nature ? params.nature : '-1'
				this.trade = params.trade ? params.trade : '-1'
				console.log(this.areaText, this.jobText, this.otherNum, '页面回显')
				this.initData()
			},
			initData() {
				switch (this.otherFilterType) {
					case 'companyListType':
						this.getCompanyData()
						break;
					case 'jobListType':
						this.getJobData()
						break;
					case 'resumeListType':
						this.getResumeData()
						break;
					default:
						break;
				}
			},
			// 获取企业列表筛选数据
			getCompanyData() {
				// 企业规模
				this.$store.dispatch('getClassify', 'companyScale').then(() => {
					let storeScale = [...this.$store.state.classifyCompanyScale]
					storeScale.unshift({
						id: '',
						text: '不限',
						select: true
					})
					this.optionScale = storeScale.map(function(item) {
						return {
							text: item.text,
							id: item.id,
							select: item.select ? item.select : false
						}
					})
					if (this.scale != -1) {
						this.optionScale[0].select = false
					}
				})
				// 企业性质
				this.$store.dispatch('getClassify', 'companyNature').then(() => {
					let storeNature = [...this.$store.state.classifyCompanyNature]
					storeNature.unshift({
						id: '',
						text: '不限',
						select: true
					})
					this.optionNature = storeNature.map(function(item) {
						return {
							text: item.text,
							id: item.id,
							select: item.select ? item.select : false
						}
					})
					if (this.nature != -1) {
						this.optionNature[0].select = false
					}
				})
				// 行业
				this.$store.dispatch('getClassify', 'trade').then(() => {
					// 重构筛选项数据格式
					let storeTrade = [...this.$store.state.classifyTrade]
					storeTrade.unshift({
						id: '',
						text: '不限'
					})
					this.optionTrade = storeTrade.map(function(item) {
						return {
							label: item.text,
							value: item.id
						}
					})

					if (this.trade != -1) {
						this.optionTrade.forEach((item, index) => {
							if (item.value == this.trade) {
								this.tradeIndex = index
							}
						})
					}
				})
			},
			// 获取职位其他筛选数据
			getJobData() {
				this.$store.dispatch('getClassify', 'education').then((res) => {
					this.optionEducation = this.restructureData(this.$store.state.classifyEdu, '', 'education')
					if (this.education != -1) {
						this.optionEducation[0].select = false
					}
				})
				this.$store.dispatch('getClassify', 'experience').then(() => {
					this.optionExperience = this.restructureData(this.$store.state.classifyExperience, '',
						'experience')
					if (this.experience != -1) {
						this.optionExperience[0].select = false
					}
				})
				this.$store.dispatch('getClassify', 'jobTag').then(() => {
					// 重构福利待遇
					let storeJobTag = JSON.parse(JSON.stringify(this.$store.state.classifyJobTag))
					storeJobTag = storeJobTag.map(function(item) {
						return {
							id: item.id,
							text: item.text,
							select: false
						}
					})
					storeJobTag.unshift({
						id: '',
						text: '全部',
						select: true
					})
					this.optionJobTag = storeJobTag
					if (this.tag != -1) { // 查看分享页面数据回显
						this.optionJobTag[0].select = false
						let tagArr = this.tag.split(',')
						tagArr.forEach(item => {
							this.optionJobTag.forEach((items, index) => {
								if (item == items.id) {
									this.optionJobTag[index].select = true
								}
							})
						})
					}
				})
				// 更新时间
				this.optionSettr = this.restructureData(this.optionSettr, '', 'settr')
				if (this.settr != -1) {
					this.optionSettr[0].select = false
				}
				// 薪资待遇
				this.optionFilterWage = this.restructureData(this.optionFilterWage, '', 'wage')
				if (this.wage != -1) {
					this.optionFilterWage[0].select = false
				}
			},
			getResumeData() {
				this.$store.dispatch('getClassify', 'experience').then(() => {
					// 经验
					let storeExperience = this.$store.state.classifyExperience
					storeExperience.unshift({
						id: '',
						text: '不限',
						select: true
					})
					this.optionExperience = storeExperience.map(function(item) {
						return {
							text: item.text,
							id: item.id,
							select: item.select ? item.select : false
						}
					})
					if (this.experience != -1) {
						this.optionExperience[0].select = false
					}
				})
				this.$store.dispatch('getClassify', 'education').then(() => {
					// 学历
					let storeEducation = this.$store.state.classifyEdu
					storeEducation.unshift({
						id: '',
						text: '不限',
						select: true
					})
					this.optionEducation = storeEducation.map(function(item) {
						return {
							text: item.text,
							id: item.id,
							select: item.select ? item.select : false
						}
					})
					if (this.education != -1) {
						this.optionEducation[0].select = false
					}
				})
				this.$store.dispatch('getClassify', 'resumeTag').then((res) => {
					// 重构简历标签
					let storeResumeTag = (JSON.parse(JSON.stringify(this.$store.state.classifyResumeTag))) || []
					storeResumeTag = storeResumeTag.map(function(item) {
						return {
							id: item.id,
							text: item.text,
							select: false
						}
					})
					storeResumeTag.unshift({
						id: '',
						text: '全部',
						select: true
					})
					this.optionResumeTag = storeResumeTag
					if (this.tag != -1) { // 查看分享页面数据回显
						this.optionResumeTag[0].select = false
						let tagArr = this.tag.split(',')
						tagArr.forEach(item => {
							this.optionResumeTag.forEach((items, index) => {
								if (item == items.id) {
									this.optionResumeTag[index].select = true
								}
							})
						})
					}
				})
				// 性别
				this.optionGender = this.restructureData(this.optionGender, '', 'gender')
				if (this.sex != -1) {
					this.optionGender[0].select = false
				}
				// 更新时间
				this.optionSettr = this.restructureData(this.optionSettr, '', 'settr')
				if (this.settr != -1) {
					this.optionSettr[0].select = false
				}
				// 薪资待遇
				this.optionFilterWage = this.restructureData(this.optionFilterWage, '', 'wage')
				if (this.wage != -1) {
					this.optionFilterWage[0].select = false
				}
				// 年龄
				this.optionAge = this.restructureData(this.optionAge, '', 'age')
				if (this.age != -1) {
					this.optionAge[0].select = false
				}
			},
			// 筛选弹窗开启
			openFilterPopup(type) {
				this[type] = !this[type]
			},
			// 地区选择
			doSearchByDistrict(data) {
				this.areaText = data.districtName
				this.$emit('doSearchByDistrict', data)
				this.showPickerDistrict = !this.showPickerDistrict
			},
			// 行业选择
			handleTradeConfirm(index) {
				this.tradeIndex = index
				var currentItem = this.optionTrade[index]
				this.industryText = currentItem.label
				this.$emit('doSearchByTrade', currentItem)
			},
			// 职位筛选
			doSearchByCategory(data) {
				this.jobText = data.categoryName
				this.$emit('doSearchByCategory', data)
				this.showPickerJobCategory = !this.showPickerJobCategory
			},
			// 简历标签多选
			handleCheckResumeTag(item) {
				if (item.id) {
					if (this.selectResumeTag.includes(item.id)) {
						this.selectResumeTag.splice(this.selectResumeTag.findIndex(v => parseInt(v.id) === parseInt(item
							.id)), 1)
					} else {
						if (this.selectResumeTag.length >= 5) {
							this.$u.toast('简历标签最多可选5个');
						} else {
							this.selectResumeTag.push(item.id)
						}
					}
					let _this = this
					this.optionResumeTag = this.optionResumeTag.map(function(item) {
						return {
							id: item.id,
							text: item.text,
							select: _this.selectResumeTag.includes(item.id)
						}
					})
				} else {
					// 全部
					this.selectResumeTag = []
					this.selectObj.tag = ''
					this.optionResumeTag = this.optionResumeTag.map(function(item, index) {
						return {
							id: item.id,
							text: item.text,
							select: index === 0
						}
					})
				}
			},
			// 福利待遇多选
			handleCheckJobTag(item) {
				if (item.id) {
					if (this.selectJobTag.includes(item.id)) {
						this.selectJobTag.splice(
							this.selectJobTag.findIndex(
								v => parseInt(v.id) === parseInt(item.id)
							),
							1
						)
					} else {
						if (this.selectJobTag.length >= 5) {
							this.$u.toast('福利待遇最多可选5个');
						} else {
							this.selectJobTag.push(item.id)
						}
					}
					let _this = this
					this.optionJobTag = this.optionJobTag.map(function(item) {
						return {
							id: item.id,
							text: item.text,
							select: _this.selectJobTag.includes(item.id)
						}
					})
				} else {
					// 全部
					this.selectJobTag = []
					this.selectObj.tag = ''
					this.optionJobTag = this.optionJobTag.map(function(item, index) {
						return {
							id: item.id,
							text: item.text,
							select: index === 0
						}
					})
				}
			},
			/**
			 * 重构数据
			 * @param data 需要重构的数据
			 * @param id 标记是否选中
			 * @param type 筛选条件
			 * @returns {*}
			 */
			restructureData(data, id, type) {
				let restoreArray = data || []
				let existSub = restoreArray.findIndex(v => v.id === '')
				if (existSub === -1) {
					// 防止重复添加
					restoreArray.unshift({
						id: '',
						text: '全部'
					})
				}
				this.selectObj[type] = id
				restoreArray = restoreArray.map((item, index) => {
					let iSelect = false
					if (id) {
						// 标记选中项
						iSelect = parseInt(item.id) === parseInt(id)
					} else {
						// 无选中项，选中全部
						iSelect = index === 0
					}
					if (type === 'wage') {
						if (iSelect) {
							this.selectObj.minwage = item.min
							this.selectObj.maxwage = item.max
						}
						return {
							id: item.id,
							text: item.text,
							select: iSelect,
							min: item.min,
							max: item.max
						}
					} else if (type === 'age') {
						if (iSelect) {
							this.selectObj.minage = item.min
							this.selectObj.maxage = item.max
						}
						return {
							id: item.id,
							text: item.text,
							select: iSelect,
							min: item.min,
							max: item.max
						}
					} else {
						return {
							id: item.id,
							text: item.text,
							select: iSelect
						}
					}

				})
				return restoreArray
			},
			// 重置
			handleClearMore() {
				for (let key in this.selectObj) {
					this.selectObj[key] = ''
				}
				this.education = '-1'
				this.sex = '-1'
				this.settr = '-1'
				this.experience = '-1'
				this.wage = '-1'
				this.age = '-1'
				this.tag = '-1'
				this.scale = '-1'
				this.nature = '-1'
				this.trade = '-1'
				this.selectJobTag = []
				this.selectResumeTag = []
				this.initData()
				this.handleSelectMore()
			},
			// 确认
			handleSelectMore() {
				if (this.selectJobTag.length > 0) {
					this.selectObj.tag = this.selectJobTag.join(',')
				}
				if (this.selectResumeTag.length > 0) {
					this.selectObj.tag = this.selectResumeTag.join(',')
				}
				this.otherNum = 0
				let num = 0
				for (let key in this.selectObj) {
					if (this.selectObj[key] && this.selectObj[key] != '' && (key != 'maxwage' && key != 'minwage' && key !=
							'minage' && key != 'maxage' && key != 'otherNum')) {
						console.log(this.selectObj[key], key)
						num++
					}
				}
				this.otherNum = num
				this.selectObj.otherNum = this.otherNum
				this.$emit('doSearchByOther', this.selectObj)
				this.showPickerOther = !this.showPickerOther
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 列表筛选切换样式 */

	.filter {
		display: flex;
		justify-content: space-between;
		padding: 30rpx;
	}

	.filter .filterBts {
		display: flex;
	}

	.filter .filterBts .btn {
		background: #f7fbf8;
		color: #8E8E8E;
		font-size: 26rpx;
		margin-right: 15rpx;
		position: relative;
		padding: 10rpx 18rpx;
		border-radius: 8rpx;
		flex-shrink: 0;
		max-width: 136rpx;
	}

	.filter .filterBts .btn .otherNum {
		margin-left: 30rpx;
		position: relative;

		&::before {
			content: '';
			position: absolute;
			left: -16rpx;
			top: 50%;
			transform: translateY(-50%);
			width: 4rpx;
			height: 4rpx;
			background: #8E8E8E;
			border-radius: 50%;
		}
	}

	.filter .filterBts .btn.ispd {
		padding: 10rpx;
	}

	.filter .filterBts .btn::before {
		content: '';
		position: absolute;
		right: 4rpx;
		bottom: 4rpx;
		border: 5rpx solid transparent;
		border-right: 5rpx solid #6D6D6D;
		border-bottom: 5rpx solid #6D6D6D;
	}

	/* 列表筛选切换样式 */


	/* 其他筛选通用样式 */
	.more_box {
		background: #fff;
		position: relative;
		padding-bottom: 140rpx;
		padding-top: 112rpx;
	}

	.more_title {
		display: flex;
		justify-content: space-between;
		padding: 40rpx 31rpx 33rpx 34rpx;
		border-bottom: 1rpx solid #F2F2F2;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10;
		background: #fff;

		.title {
			color: #222222;
			font-size: 36rpx;
			font-weight: bold;
		}
	}

	.more_box .item_wrapper {
		padding: 0 30rpx;
		position: relative;
	}

	.more_box .item_wrapper .item_group .item {
		display: block;
		float: left;
		width: 215rpx;
		margin: 0 21rpx 20rpx 0;
		text-align: center;
		background-color: rgba(150, 150, 150, 0.06);
		color: #8A8A8A;
		font-size: 26rpx;
		padding: 18rpx 0;
		border-radius: 15rpx;
		border: 1rpx solid transparent;
	}

	.more_box .item_wrapper .item_group .item.selected {
		border: 1rpx solid #266DFF;
		background-color: #F5F8FF;
		color: #266DFF;
	}

	.more_box .item_wrapper .item_group .item:nth-of-type(3n) {
		margin-right: 0;
	}

	.more_box .item_wrapper .item_title {
		padding: 30rpx 0;
		font-size: 30rpx;
		color: #333333;
	}

	.wrapper_bottom {
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		width: 100%;
		z-index: 3;
		background: #fff;
		padding: 26rpx 47rpx 34rpx;
		box-shadow: 0px 0px 38px 0px rgba(88, 88, 88, 0.06);
	}

	.wrapper_bottom .btn_c {
		flex-shrink: 0;
		background-color: #f4f4f4;
		font-size: 32rpx;
		text-align: center;
		padding: 21rpx 0;
		border-radius: 50rpx;
	}

	.wrapper_bottom .btn_c.affirm {
		width: 390rpx;
		background-color: #1787fb;
		color: #FFFFFF;
		margin-left: 24rpx;
	}

	.wrapper_bottom .btn_c.reset {
		width: 240rpx;
		color: #2A2A2A;
	}

	/* 其他筛选通用样式 */
</style>